const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const COMMON = {
  // 项目的入口文件
  entry: './src/main.js',
  // 项目的输出路径以及输出文件名
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      // 处理vue文件
      test: /\.vue$/,
      loader: 'vue-loader'
    }, {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }, {
      // 处理css文件
      test: /\.css$/,
      use: ['style-loader', 'css-loader'] // 需要注意loader的顺序
    }, {
      // 处理less文件
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }, {
      // 处理图片文件
      test: /\.(png|jpg|gif|jpeg)$/,
      use: [{
        loader: 'url-loader',
        // loader: 'file-loader',
        options: {
          esModule: false, // 这里设置为false
          name: '[name].[ext]',
          limit: 10240
        }
      }]
    }]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      // 输出文件名称
      filename: 'index.html',
      // 模板入口
      template: './template.html',
      // 模板参数
      templateParameters: {
        title: 'vue-task'
      }
    })
  ]
}

module.exports = COMMON